<template>  
  <div class="home">  
    <!-- 顶部区域 -->  
    <div class="top-bar">  
      <div class="left" style="width: 40%;">  
        <img src="../store/首页花朵.webp" alt="花店Logo" class="logo" style="float: left;width: 80px;height: 80px;"/>  
        <h2 style="float: left">欢迎来到我们原野花店</h2>  
      </div>  
      <div class="right">  
        <el-input v-model="searchQuery" placeholder="搜索您喜欢的花卉" class="search-input" style="margin-right: 10px;"/>  
        <el-button type="text" @click="confirmLogout">退出</el-button>  
      </div>  
    </div>  
    <!-- 轮播图区域 -->  
    <div class="carousel-container">  
      <el-carousel :height="400" arrow="always">  
        <el-carousel-item v-for="(image, index) in carouselImages" :key="index">  
          <img :src="image" class="carousel-image" />  
        </el-carousel-item>  
      </el-carousel>  
    </div>  
    <!-- 导航栏 -->  
    <el-menu :default-active="activeIndex" class="el-menu-demo custom-menu" mode="horizontal" @select="handleSelect">  
      <el-menu-item index="1"><Router-link to="/home/index">首页</Router-link></el-menu-item>  
      <el-menu-item index="2">
       <Router-link to="/home/fenlei">分类</Router-link> 
      </el-menu-item>  
      <el-menu-item index="3"><Router-link to="/home/gowuche">购物车</Router-link></el-menu-item>  
      <el-menu-item index="4"><Router-link to="/home/grzx">个人中心</Router-link></el-menu-item>  
    </el-menu>  
    <router-view></router-view>
    
  

  </div>  
</template>  
  
<script setup>  
import { ref, reactive, computed, watch, onMounted } from 'vue';  
import { useRouter } from 'vue-router';  
import { ElMessage, ElMessageBox, ElMenu, ElMenuItem, ElInput, ElButton, ElForm, ElFormItem } from 'element-plus';  
  
const router = useRouter();  
  
// 响应式数据  
const searchQuery = ref('');  
const activeIndex = ref('1');  
const activeImage = ref(0);   
  
const cart = ref([]); 
  // 轮播图数据  
const carouselImages = ref([  
  '/src/store/轮播图1.jpg',  
  '/src/store/轮播图2.jpg',  
  '/src/store/轮播图3.jpg',  
  // 添加更多轮播图数据...  
]); 

// 如果有过滤逻辑，可以定义filteredFlowers；若无，则直接使用flowers
const filteredFlowers = computed(() => flowers.value); 

// 处理搜索  
const handleSearch = () => {  
  ElMessage.info(`搜索了: ${searchQuery.value}`);  
  // 这里可以添加实际的搜索逻辑，例如调用API  
};  
  
// 示例：加入购物车的函数（实际实现需根据具体业务逻辑）
const addToCart = (flower) => {
  ElMessage.success(`已添加${flower.name}到购物车`);
};
  
  
// 监听搜索查询（已包含在computed属性中，因此无需额外watch）  
  
// 导航栏选中事件  
const handleSelect = (key, keyPath) => {  
  activeIndex.value = key;  
  // 根据需要添加路由跳转或其他逻辑  
};  
  
// 确认退出  
const confirmLogout = () => {  
  ElMessageBox.confirm('您确定要退出吗？', '提示', {  
    confirmButtonText: '确定',  
    cancelButtonText: '取消',  
    type: 'warning'  
  }).then(() => {  
    router.push('/'); // 假设首页的路由路径为 /，您可能需要根据实际情况调整  
  }).catch(() => {  
    ElMessage.error({  
      message: '您取消了退出操作'  
    });  
  });  
};  
// 生命周期钩子：组件挂载后自动轮播图片（可选）  
onMounted(() => {  

});  
</script>  
  
<style scoped>  
.top-bar {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  background-color: #fff;  
  padding: 10px 20px;  
}  
  
.logo {  
  width: 40px;  
  height: 40px;  
  margin-right: 10px;  
}  
  
.search-input {  
  width: 200px;  
}  
  
.top-bar .right {  
  display: flex;  
  align-items: center;  
}  
  
.logout-button {  
  margin-left: 10px;  
}  
  
.el-menu-demo {  
  border-bottom: none; /* 移除底部边框，如果需要的话 */  
}  
  
.custom-menu {  
  display: flex;  
  justify-content: space-between;  
  width: 100%;  
  background-color: #fff; /* 确保菜单背景色与顶部区域一致 */  
  height: 40px;
}  
  
.carousel {  
  position: relative;  
  overflow: hidden; /* 隐藏超出容器的内容 */  
  width: 100%; /* 确保轮播图占据整个父容器的宽度 */  
  max-height: 400px; /* 设置最大高度，防止图片过大 */  
}  
  
.carousel img {  
  position: absolute;  
  top: 0;  
  left: 0;
}
.mb-2 {  
  margin-bottom: 10px;  
} 
.carousel-container {  
  width: 100%;  
  margin: 20px 0; /* 添加一些外边距以分隔内容 */  
}  
  
.carousel-image {  
  width: 100%;  
  height: 100%;  
  object-fit: cover;  
  
}  

</style>